{extend name="./app/admin/view/main.html" /}
{block name="title"}文章{if condition='$id'}编辑{else/}发布{/if} - {__block__}{/block}

{block name="style"}
<style>
    .img-main-pic-img{
        max-height: 100px;
    }
    .div-main-pic{
        height:160px;
    }
    .simditor-body {
        overflow-y: auto;
    }
    .tags-btn:hover {
        background-color: #dddee1;
    }
    .ivu-select-group-title {
        padding-left: 15px;
    }
    .ivu-select-group .ivu-select-item{
        padding-left: 30px;
    }
</style>
{/block}

{block name="main"}
<header class="mipcms-container-header">
    <div class="float-left header-group">
        <h4 class="title">文章</h4>
        <h5 class="sub-title"><a href="{$mipInfo.domain}/{$Think.config.admin}/article/articleList/">全部文章</a>
            <i class="ion-chevron-right"></i> {if condition='$id'}编辑{else/}发布{/if}</h5>
    </div>
    <div class="float-right">
        <button type="button" class="float-right ivu-btn ivu-btn-primary ivu-btn-circle" @click='publishPost'>
            <span><Icon type="checkmark-round"></Icon> 提交保存</span>
        </button>
    </div>
</header>

<main class="mipcms-container-body" style="height: calc(100% - 50px)">
    <section class="">
        <section class="mip-box">
            <section class="mip-box-body">
                 <i-Form :label-width="120" class="m-t-md v-h" :class='vShow'>
                    <Form-Item label="标题" class="ivu-form-item-required">
                        <i-Input style="width: 500px;" v-model="articleInfo.title" placeholder="请输入标题..." @on-change="articleChanged"></i-Input>
                    </Form-Item>
                    <Form-Item label="分类" prop="title" class="ivu-form-item-required">
                        <Cascader :data="categoryListForCascader" v-model="selectedCids" change-on-select="true" transfer="true" style="width: 500px;"></Cascader>
                    </Form-Item>
                 </i-Form>

                <i-Form :label-width="120" class="m-t-md v-h" :class='vShow'>

                     <Form-Item label="内容" class="ivu-form-item-required">
                        <textarea id="article_editor" class="simditor" style="height: 400px;" placeholder="请输入内容..."></textarea>
                    </Form-Item>

                </i-Form>

                <i-Form :label-width="120" class="m-t-md v-h" :class='vShow'>

                    <Form-Item label="状态" class="ivu-form-item-required">
                        <Radio-Group v-model="articleInfo.status" type="button">
                            <Radio label="1" value="1">发布</Radio>
                            <Radio label="2" value="2">暂存</Radio>
                            <Radio label="0" value="0">禁用</Radio>
                        </Radio-Group>
                    </Form-Item>

                </i-Form>


                <Spin size="large" fix v-if="vShow==''"></Spin>
                <div class="text-center">
                    <i-button type="dashed" onclick="javascript:history.back()">取 消</i-button>
                    <i-button type="success"  @click='publishPost'>
                        <span><Icon type="checkmark-round"></Icon> 提交保存</span>
                    </i-button>
                </div>
            </section>
        </section>
    </section>

</main>
{/block}

{block name="javascript"}
{__block__}
    <link rel="stylesheet" type="text/css" href="{$mipInfo.domain}/assets/simditor/styles/simditor.css?v={$mipInfo.scriptVersion}" />
    <link rel="stylesheet" href="{$mipInfo.domain}/assets/simditor/styles/simditor-html.css?v={$mipInfo.scriptVersion}" media="screen" charset="utf-8" />


    <script type="text/javascript" src="{$mipInfo.domain}/assets/simditor/scripts/module.js"></script>
    <script type="text/javascript" src="{$mipInfo.domain}/assets/simditor/scripts/hotkeys.js"></script>
    <script type="text/javascript" src="{$mipInfo.domain}/assets/simditor/scripts/uploader.js?v={$mipInfo.scriptVersion}"></script>

    <script type="text/javascript" src="{$mipInfo.domain}/assets/simditor/scripts/simditor.js?v={$mipInfo.scriptVersion}"></script>
    <script type="text/javascript" src="{$mipInfo.domain}/assets/simditor/scripts/simditor-autosave.js"></script>

    <script type="text/javascript" src="{$mipInfo.domain}/assets/simditor/scripts/beautify-html.js"></script>
    <script type="text/javascript" src="{$mipInfo.domain}/assets/simditor/scripts/simditor-html.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            authInfo: window.authInfo,
            vShow: '',
            id: '{$id}',
            cid: '{$cid}',
            articleInfo: {'status':1 } ,
            selectedCids: '',
            categoryListForCascader: [],
            isShowTagsList: false, //标签下拉状态

            toolbar : ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|'
               ,'ol','ul' , 'blockquote', 'code', '|','table', 'link', 'image', 'hr', '|'
                , 'html'],
            articlePublishStatus: 'add',
        },
        watch: {
        },
        mounted() {
            if(this.id!=''){
                this.articlePublishStatus = 'edit';
            }else{
                this.articlePublishStatus='add';
            }

            window.changed = false;

            this.getCategoryListForCascader();
            this.editorInit();
        },
        methods: {
            editorInit() {
                var _this = this;
                setTimeout(function() {
                    _this.createEditor();
                }, 100);
            },

            //创建编辑器
            createEditor() {
                var _this = this;

                document.getElementById('article_editor').innerHTML = '';
                this.editor = new Simditor({
                    textarea: document.getElementById('article_editor'),
                    toolbar: _this.toolbar,
                    upload: {
                        url: '{$mipInfo.domain}/{$Think.config.admin}/ApiAdminUpload/simImgUpload',
                        params: {
                            type: 'article',
                        },
                        // ajax 安全验证
                        headers: {'terminal':'pc','access-key':authInfo.access_key ,'uid':authInfo.uid,'access-token':authInfo.access_token},
                        fileKey: 'fileDataFileName',
                        connectionCount: 3,
                        leaveConfirm: '正在上传文件'
                    },
                    pasteImage: true, scrollContainer: 'main.mipcms-container-body',
                    autosave: 'editor-content',

                });
                this.editor.on('valuechanged',function (e) {
                    var c1 =this.getValue();
                    if(c1.indexOf('<p><span style=""><br></span><br></p>')>=0){
                       c1 =  c1.replace(/<p><span style=""><br><\/span><br><\/p>/g,'');
                       this.setValue(c1);
                    }
                    window.changed=true;
                })
                this.vShow = 'v-s';

            },
            getCategoryListForCascader: function() {

                var _this = this;
                this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticleCategory/get_for_full_cascader', { }).then(res => {
                    if(res.code == 1) {
                        var categoryList = res.data;
                        if (!categoryList.length) {
                            this.$Modal.warning({
                                title: '系统提示',
                                content: '<div>您尚未新建分类栏目，请先建立</div>',
                                okText: '点击去新建',
                                 onOk: () => {
                                    window.location.href = '{$mipInfo.domain}/{$Think.config.admin}/article/articlesCategoryTree/';
                                }
                            });
                        }

                        this.categoryListForCascader = categoryList;

                        if (_this.articlePublishStatus == 'edit') {
                            _this.getItemInfo();
                        }
                    }
                });
            },

            //编辑时
            getItemInfo() {
                var _this = this;
                this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticle/get_by_id', {
                    id: _this.id,
                }).then(function(res) {
                    if(res.code == 1) {
                        _this.articleInfo = res.data;

                        let fullcid = res.data.fullcid;
                        let arrFullid = fullcid.split(',');
                        arrFullid.pop();
                        _this.selectedCids = arrFullid;

                        _this.editor.setValue(_this.articleInfo.content);
                        window.changed=false;
                    }
                });
            },
            //开始发布
            publishPost: function() {
                this.content = this.editor.getValue();

                var d1=this.articleInfo;
                d1.content = this.content;
                d1.cid = this.selectedCids[this.selectedCids.length-1];

                if(this.articlePublishStatus != 'add') {
                    this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticle/do_edit',d1 ).then(res => {
                        if(res.code == 1) {
                            this.$Message.success(res.msg);
                            this.editor.setValue('');
                            window.changed=false;
                            window.location.href = '{$mipInfo.domain}/{$Think.config.admin}/article/articleList/cid-{$cid}';
                        }
                    });
                } else {
                    var tempField = this.fieldList;
                    this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticle/do_add',d1).then(res => {
                        if(res.code == 1) {
                            if(res.data) {
                                var resMIp = JSON.parse(res.data);
                                this.$Message.success('推送成功：' + resMIp.success_mip + '条，当天剩余条数：' + resMIp.remain_mip);
                            }
                            this.editor.setValue('');
                            window.changed=false;
                            window.location.href = '{$mipInfo.domain}/{$Think.config.admin}/article/articleList/cid-{$cid}';


                        }
                    });
                }

            },
            articleChanged(){
                window.changed = true;
            }
        }
    })
  </script>

<script type="text/javascript">
    window.onbeforeunload = function (evt) {
        if(window.changed){
            return confirm('您确信要离开该页面吗？如果离开，页面所有未保存的内容都会丢失。');
        }
    }
</script>
{/block}